<script setup>
import { defineProps, defineEmits } from 'vue'
import RoomCard from './RoomCard.vue'

// 输入：房间列表、加载状态、搜索关键词
const props = defineProps({
  rooms: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  searchQuery: { type: String, default: '' }
})

// 输出事件：选择房间 / 加入房间（向父级冒泡）
const emit = defineEmits(['select-room', 'join-room'])
</script>

<template>
  <!-- 房间网格：处理加载、空态与列表展示 -->
  <div class="room-grid">
    <template v-if="props.loading">
      <div class="skeleton-card" v-for="i in 6" :key="i">
        <div class="skeleton-banner" />
        <div class="skeleton-info">
          <div class="skeleton-title" />
          <div class="skeleton-meta" />
        </div>
      </div>
    </template>
    <div v-else-if="props.rooms.length === 0" class="no-rooms">
      <div class="empty-pill">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
        <span>{{ props.searchQuery ? '未找到匹配的房间' : '暂无房间' }}</span>
      </div>
    </div>
    <template v-else>
      <RoomCard
        v-for="room in props.rooms"
        :key="room.roomId"
        :room="room"
        @select="emit('select-room', $event)"
        @join="emit('join-room', $event)"
      />
    </template>
  </div>
</template>

<style scoped>
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 0;
}

.no-rooms { display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.empty-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px dashed #cbd5e1; background: linear-gradient(180deg,#ffffff,#fafafa); color: #475569; font-weight: 700; }

/* 小屏时适度增大列宽，避免过挤 */
@media (max-width: 640px) {
  .room-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
}

/* Skeletons */
.skeleton-card {
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.skeleton-banner { flex: 1; min-height: 150px; background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 37%,#f3f4f6 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
.skeleton-info { padding: 14px 16px; }
.skeleton-title { height: 16px; width: 60%; background: #e5e7eb; border-radius: 6px; margin-bottom: 10px; }
.skeleton-meta { height: 12px; width: 40%; background: #e5e7eb; border-radius: 6px; }

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
</style> 